<template>
  <div class="function-copy-modal">
    <je-modal
      v-model:visible="isShow"
      width="460px"
      height="auto"
      :resize="false"
      :maximizable="false"
      title="复制"
      cancel-button
      :ok-button="onSubmit"
      @close="onCancel"
    >
      <je-form layout="vertical" :model="formState" :colon="false" autocomplete="off">
        <je-form-item label="复制功能信息" name="functionName">
          <je-input v-model:value="functionName" disabled placeholder=""> </je-input>
        </je-form-item>
        <je-form-item
          label="新功能名称"
          v-bind="validateInfos.FUNCINFO_FUNCNAME"
          name="FUNCINFO_FUNCNAME"
        >
          <je-input v-model:value="formState.FUNCINFO_FUNCNAME" placeholder=""> </je-input>
        </je-form-item>
        <je-form-item
          label="新功能编码"
          v-bind="validateInfos.FUNCINFO_FUNCCODE"
          name="FUNCINFO_FUNCCODE"
        >
          <je-input v-model:value="formState.FUNCINFO_FUNCCODE" placeholder=""> </je-input>
        </je-form-item>
        <je-form-item
          label="选择模块"
          v-bind="validateInfos.FUNCINFO_MODALNAME"
          name="FUNCINFO_MODALNAME"
        >
          <je-tree-select
            v-model:value="formState.FUNCINFO_MODALNAME"
            name="FUNCINFO_MODALNAME"
            config-info="JE_CORE_FUNCINFO,FUNCINFO_MODALNAME~FUNCINFO_MODALID,text~id,S"
            :querys="queryArr"
            :orders="[{ code: 'SY_ORDERINDEX', type: 'ASC' }]"
            @select="selectFunc"
          />
        </je-form-item>
      </je-form>
    </je-modal>
  </div>
</template>

<script>
  import { ref, defineComponent, reactive, computed } from 'vue';
  import { Input, Modal, Form, InputSelect } from '@jecloud/ui';
  import { CopyFunction } from '@/api/index';
  import { formRules } from '@/helper/regular';
  import { useFuncStore } from '@/store/func-store';

  const useForm = Form.useForm;
  export default defineComponent({
    name: 'ModalCopy',
    components: {
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
      JeModal: Modal,
      JeTreeSelect: InputSelect.Tree,
    },
    props: {
      visble: {
        type: Boolean,
        default: false,
      },
      record: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    emits: ['changeModal', 'refreshChildData', 'childFormData'],
    setup(props, { emit }) {
      const funcStore = useFuncStore();
      const recordData = reactive(props.record);
      const formState = reactive({
        FUNCINFO_FUNCCODE: `${props.record.FUNCINFO_FUNCCODE}_COPY`,
        FUNCINFO_FUNCNAME: `${props.record.FUNCINFO_FUNCNAME}_COPY`,
        FUNCINFO_MODALNAME: '',
        FUNCINFO_MODALID: '',
      });
      // 复制功能信息
      const functionName = computed(() => {
        return `${recordData.FUNCINFO_FUNCNAME} （${recordData.FUNCINFO_FUNCCODE}）`;
      });
      const isShow = ref(props.visble);
      const rulesRef = {
        ...formRules(),
        FUNCINFO_MODALNAME: [
          {
            required: true,
            message: '该输入项为必填项',
          },
        ],
      };
      // watch(
      //   () => formState,
      //   (newVal) => {
      //     emit('childFormData', newVal);
      //   },
      //   { deep: true },
      // );
      const { validateInfos, validate } = useForm(formState, rulesRef, {
        onValidate: (...args) => console.log(...args),
      });
      const methods = {
        selectFunc({ rows }) {
          if (!rows.length) {
            return false;
          }
          if (['SYSTEM', 'FUNCFIELD'].includes(rows[0].nodeInfoType)) {
            Modal.alert('请选择功能和模块！', 'info');
            return false;
          }
        },
        onSubmit({ button }) {
          const btn = button;
          btn.loading = true;
          validate()
            .then(() => {
              const params = {
                tableCode: 'JE_CORE_FUNCINFO',
                oldFuncId: recordData.JE_CORE_FUNCINFO_ID,
                FUNCINFO_FUNCNAME: formState.FUNCINFO_FUNCNAME,
                FUNCINFO_FUNCCODE: formState.FUNCINFO_FUNCCODE,
                SY_PARENT: formState.FUNCINFO_MODALID,
                FUNCINFO_MODALNAME: formState.FUNCINFO_MODALNAME,
              };
              console.log(params, recordData);
              CopyFunction(params)
                .then((res) => {
                  btn.loading = false;
                  Modal.message(res.message, 'success');
                  methods.onCancel();
                })
                .catch((err) => {
                  btn.loading = false;
                  Modal.alert(err.message, 'error');
                });
            })
            .catch((err) => {
              btn.loading = false;
              console.log('error', err);
            });
          return false;
        },
        onCancel() {
          isShow.value = false;
          emit('changeModal', isShow.value);
        },
      };

      return {
        formState,
        rulesRef,
        ...methods,
        validateInfos,
        isShow,
        recordData,
        functionName,
        queryArr: ref([
          {
            code: 'SY_PRODUCT_ID',
            type: '=',
            value: funcStore.product.id,
            cn: 'and',
          },
        ]),
      };
    },
  });
</script>
<style lang="less" scoped>
  .function-copy-modal {
    width: 100%;
    height: 100%;
    overflow: scroll;
    .header {
      display: flex;
      justify-content: space-between;
    }
  }
</style>
